<template>
  <view class="containerDoc">
    <view class="page-container" :style="listHeightStylePage">
      <!-- 导航栏 -->
      <u-navbar title="人脸管理" placeholder @leftClick="back" :border="false" :shadow="true"></u-navbar>

      <view style="padding: 20rpx;" :style="listHeightStyle">
        <view class="FacemPersonalInformation" @click="ViewClick">
          <view class="avatar-container">
            <image v-if="imgurl" class="avatar-image" :src="imgurl"></image>
            <view v-else class="text">{{ getUserName(name) }}</view>
          </view>

          <view class="info-container">
            <view class="name">{{ name }}</view>
            <view class="department">{{ department }}</view>
          </view>

          <view class="arrow-container">
            <up-icon name="arrow-right" color="#ccc" size="24"></up-icon>
          </view>
        </view>

        <view class="status-container">
          <text class="status-text"
            :class="{ 'status-success': isfirstrlsbstatus == 1, 'status-fail': isfirstrlsbstatus != 1 }">
            {{ isfirstrlsbstatus == 1 ? '已录入' : '未录入' }}
          </text>
        </view>

        <view class="image-container">
          <image class="management-image" src="@/static/workspace/renlianguanli.png"></image>
          <view class="privacy-container">
            <view class="privacy-item">
              <image class="privacy-image" src="@/static/workspace/yinsi.png"></image>
              <text class="privacy-text">隐私保障中</text>
            </view>
          </view>

        </view>

        <view class="modification-record-container" v-if="modificationRecords.length !== 0">
          <view class="record-title">审核记录</view>
          <view class="record-list">
            <view class="record-item" v-for="(record, index) in modificationRecords" :key="index">
              <view class="record-description">{{ record.description }}</view>
            </view>
          </view>
        </view>
      </view>


      <view class="action-foBtn">
        <view @click="FaceregistrationClick" class="action-button"
          :class="[{ 'btn-success': isfirstrlsbstatus != 1, 'btn-primary': isfirstrlsbstatus == 1 }, { 'btn-disabled': !canSubmit }]">
          {{ isfirstrlsbstatus == 1 ? '修改人脸' : '录入人脸' }}
        </view>
      </view>

    </view>
  </view>
</template>

<script>
import { Kaoqinisfirstrlsb, KaoqinCheckHeaderImg } from '@/apis/worKspace/face.js'
export default {
  data () {
    return {
      listHeight: 0, // 动态计算的高度
      listHeightStyle: {}, // 动态计算的样式
      appHeight: null,
      topHeight: 0,
      listHeightStylePage: {},
      scrollViewHeight: {}, // 动态计算 scroll-view 的高度
      imgurl: '', // 头像地址
      name: '', //  姓名
      department: '', //  部门
      user: {}, // 用户信息
      isfirstrlsbstatus: null,
      modificationRecords: [],
      navigating: false,
      canSubmit: true, // 是否允许提交
    }
  },
  onShow () {
    this.getKaoqinCheckHeaderImg()
    this.getisfirstrlsb()
  },
  async created () {
    this.user = JSON.parse(uni.getStorageSync('user')).user || JSON.parse(uni.getStorageSync('user'))
    this.imgurl = this.user.img_url || this.user.avatar
    this.name = this.user.name || this.user.worker_name
    this.department = this.user.new_depart_name || this.user.user.new_depart_name
    this.appHeight = uni.getSystemInfoSync();
    this.topHeight = this.appHeight.screenHeight;

    // #ifdef H5
    this.listHeightStylePage = {
      height: `${window.innerHeight}px`,
    };
    // #endif

    // #ifdef APP-PLUS
    this.listHeightStylePage = {
      height: `${this.topHeight}px`,
    };
    // #endif

    await this.calculateListHeight();

  },
  methods: {
    async getKaoqinCheckHeaderImg () {
      try {
        let res = await KaoqinCheckHeaderImg({
          worker_id: this.user.worker_id
        })
        // status 0 => 有待审核，禁止提交
        // status 1 => 可以提交
        this.canSubmit = res.status == 1

        if (res.status == 0) {
          this.modificationRecords = [
            { description: '您已提交人脸信息，正在等待管理员审核' }
          ]
        } else {
          this.modificationRecords = [] // 没有待审核，清空
        }
      } catch (err) {
        console.log(err)
      }
    },
    calculateListHeight () {
      const windowHeight = window.innerHeight; // 视口高度
      const navbarHeight = 52; // 导航栏高度（假设为 44px）
      const tabsHeight = 88;
      // #ifdef APP-PLUS
      this.listHeightStyle = {
        height: `${this.topHeight - 164}px`,
        overflowY: 'auto'
      };
      // #endif

      // #ifdef H5
      const listHeight = windowHeight - navbarHeight - tabsHeight;
      this.listHeightStyle = {
        height: `${listHeight}px`,
        overflowY: 'auto'
      };
      // #endif
    },
    getUserName (name) {
      if (name?.length === 0) {
        return '';
      } else if (name?.length <= 2) {
        return name;
      } else if (name?.length >= 3) {
        return name.substring(name.length - 2);
      }
    },
    // 获取是否首次录入人脸
    async getisfirstrlsb () {
      try {
        let res = await Kaoqinisfirstrlsb({
          'phone': this.user.phone,
        })
        if (res.status == 1) {
          this.isfirstrlsbstatus = res.status
        } else if (res.status == 0) {
          this.isfirstrlsbstatus = res.status
        }

      } catch (e) {

      }
    },
    ViewClick () {

      if (!this.user.worker_name || !this.user.worker_id) {
        uni.$u.toast('用户信息不完整，无法查看个人信息');
        return;
      }

      let value = {
        name: this.user.worker_name,
        id: this.user.worker_id
      }

      if (this.navigating) return;
      this.navigating = true
      let that = this
      uni.navigateTo({
        url: '/pages/addressBook/details/grdetails',
        animationType: 'none',
        success: function (res) {
          setTimeout(() => {
            res.eventChannel.emit('details', { item: value });
          }, 100);
          that.navigating = false
        },
        fail () {
          that.navigating = false
        }
      });
    },
    FaceregistrationClick () {
      console.log('isfirstrlsbstatus', this.isfirstrlsbstatus);
      if (!this.canSubmit) {
        uni.$u.toast('存在待审核照片，请等待审核后再提交');
        return;
      }

      // uni.$u.toast('功能正在开发中');
      // #ifdef H5
      uni.navigateTo({
        url: `/pages/workspace/components/hwFacemodificationpage?isfirstrlsbstatus=${this.isfirstrlsbstatus}`,
        animationType: 'none',
      });
      // #endif

      // #ifdef APP-PLUS
      uni.navigateTo({
        url: `/pages/workspace/components/appFacemodificationpage?isfirstrlsbstatus=${this.isfirstrlsbstatus}`
      })
      // #endif
    },
    back () {
      uni.navigateBack();
    }

  },
}
</script>

<style scoped lang="scss">
.containerDoc {
  overflow: hidden;
  background-color: #f3f4f5;

  .page-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .FacemPersonalInformation {
      display: flex;
      align-items: center;
      /* 垂直居中对齐 */
      height: 140rpx;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 0 20rpx;

      .avatar-container {
        flex-shrink: 0;
        width: 80rpx;
        height: 80rpx;
        border-radius: 10%;
        overflow: hidden;

        .avatar-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .text {
          height: 100rpx;
          border-radius: 10%;
          background: #377fff;
          text-align: center;
          color: #ffffff;
          line-height: 80rpx;
        }
      }

      .info-container {
        flex: 1;
        margin-left: 20rpx;

        .name {
          font-size: 32rpx;
          color: #333;
          font-weight: bold;
        }

        .department {
          font-size: 28rpx;
          color: #666;
          margin-top: 8rpx;
        }
      }

      .arrow-container {
        flex-shrink: 0;
        /* 防止箭头被压缩 */
        margin-left: 20rpx;
      }
    }

    .status-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80rpx;
      margin-top: 30rpx;

      .status-text {
        font-size: 28rpx;
        padding: 10rpx 20rpx;
        border-radius: 40rpx;
        color: #9b9ca0;
      }
    }

    .image-container {
      position: relative;
      text-align: center;
      justify-content: center;
      /* 水平居中 */
      align-items: center;
      /* 垂直居中 */
      margin-top: 10rpx;

      .management-image {
        width: 350rpx;
        /* 图片宽度 */
        height: 350rpx;
        /* 图片高度 */
        border-radius: 20rpx;
        /* 圆角效果 */
        object-fit: cover;
        /* 图片自适应裁剪 */
      }

      .privacy-container {
        position: absolute;
        display: flex;
        left: 36%;
        bottom: 0px;

        .privacy-item {
          display: flex;
          align-items: center;
          /* 图片和文字垂直居中对齐 */

          .privacy-image {
            width: 45rpx;
            /* 图片宽度 */
            height: 50rpx;
            /* 图片高度 */
            border-radius: 10rpx;
            /* 圆角效果 */
            margin-right: 20rpx;
            /* 图片与文字之间的间距 */
          }

          .privacy-text {
            font-size: 28rpx;
            color: #4090f7;
          }
        }
      }

    }



    .modification-record-container {
      margin-top: 30rpx;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 20rpx;

      .record-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
      }

      .record-list {
        .record-item {
          padding: 20rpx 0;
          border-bottom: 1rpx solid #f3f4f5;

          &:last-child {
            border-bottom: none;
          }

          .record-time {
            font-size: 28rpx;
            color: #666;
            margin-bottom: 10rpx;
          }

          .record-description {
            font-size: 26rpx;
            color: #999;
          }
        }
      }
    }


  }



  .action-foBtn {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 150rpx;
    background-color: #fff;

    .action-button {
      top: 10rpx;
      position: absolute;
      left: 5%;
      width: 90%;
      background-color: #4090f7;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
      text-align: center;
      line-height: 100rpx;
      border-radius: 50rpx;
      box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);

      &.btn-success {
        background-color: #4caf50;
        /* 绿色背景 */
      }

      &.btn-primary {
        background-color: #4090f7;
        /* 蓝色背景 */
      }

      &.btn-disabled {
        background-color: #ccc;
        pointer-events: none; // 完全禁用点击
      }
    }
  }


}
</style>
